import React from 'react';
import { 
    List,
    Datagrid, 
    TextField, 
    EditButton, 
    TextInput, 
    SimpleForm,
    Create,
    EmailField,
    DateField
} from 'react-admin';
import { withStyles } from '@material-ui/core/styles';

const styles = {
    button: {
        fontWeight: 'bold',
        // This is JSS syntax to target a deeper element using css selector, here the svg icon for this button
        '& svg': { color: 'orange' }
    },
};

const MyEditButton = withStyles(styles)(({ classes, ...props }) => (
    <EditButton
        className={classes.button}
        {...props}
    />
));

export const UserList = props => (
    <List {...props}>
        <Datagrid rowClick="edit">
            <TextField source="id" />
            <TextField source="username" />
            <EmailField source="email" />
            <TextField source="mobile" />
            <DateField source="createdAt" showTime/>
            <MyEditButton />
        </Datagrid>
    </List>
);

export const UserCreate = props => (
    <Create {...props}>
        <SimpleForm>
            <TextInput source="username" />
            <TextInput source="password" />
            <TextInput source="email" />
            <TextInput source="mobile" />
        </SimpleForm>
    </Create>
);